// eslint-disable-next-line @typescript-eslint/no-var-requires
import { getAdjustMaxSize, getAdjustSize, drawImageWithDegree, convexHull, getCropRect } from "./utils.js";
// 获取显示区域长宽
// eslint-disable-next-line no-undef
const device = my.getSystemInfoSync();
const W = device.windowWidth;
const H = device.windowHeight - 50;
let touchStartX = 0; //触摸时的原点
let touchStartY = 0; //触摸时的原点
let touchMoveX = 0; // x轴方向移动的距离
let touchMoveY = 0; // y轴方向移动的距离
let touchWidth, touchHeight;

Component({
  mixins: [],
  data: {
    scaleNum: 646 / 652,
    cropperData: {
      drawSign: 0,
      hidden: true,
      left: 0,
      top: 0,
      width: W,
      height: H,
      W: W,
      H: H,
      itemLength: 50,
      imageInfo: {
        path: "",
        width: 0,
        height: 0,
      },
      scaleInfo: {
        x: 1,
        y: 1,
      },
      cropCallback: null,
      sizeType: ["original", "compressed"], //'original'(default) | 'compressed'
      original: !false, // 默认压缩，压缩比例为截图的0.4
    },
    cropperMovableItems: {
      topleft: {
        x: 50,
        y: 50,
      },
      topright: {
        x: W - 50,
        y: 50,
      },
      bottomleft: {
        x: 50,
        y: H - 50,
      },
      bottomright: {
        x: W - 50,
        y: H - 50,
      },
    },
    cropperChangableData: {
      canCrop: true,
      rotateDegree: -90,
      originalSize: {
        width: 750,
        height: 750,
      },
      scaleSize: {
        width: 750,
        height: 750,
      },
      shape: {},
      previewImageInfo: {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
      },
    },
  },
  props: {
    src: "",
  },
  didMount() {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    let _this = this;
    this.props.refs && this.props.refs(_this);

    this.setData({
      scaleNum: this.props.scaleNum,
    });
  },
  didUpdate() {},
  didUnmount() {},
  methods: {
    cameraTo() {
      let imgSrc = this.props.src;
      if (!imgSrc) {
        this.errorImg();
      } else {
        // eslint-disable-next-line no-undef
        my.getImageInfo({
          src: imgSrc,
          success: res => {
            this.firstRender(imgSrc);
          },
          fail: () => {
            this.errorImg();
          },
        });
      }
    },
    errorImg() {
      // eslint-disable-next-line no-undef
      my.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        isClipped: false,
        success: e => {
          let imgSrc = e.tempFilePaths[0];
          this.firstRender(imgSrc);
        },
        fail: () => {
          //报错了
          this.hideCropper(); //隐藏，我在项目里是点击完成就上传，所以如果回调是上传，那么隐藏掉就行了，不用previewImage
        },
      });
    },
    firstRender(imgSrc) {
      // eslint-disable-next-line no-undef
      this.originalCanvasCtx = my.createCanvasContext("originalCanvas");
      // eslint-disable-next-line no-undef
      this.moveCanvasCtx = my.createCanvasContext("moveCanvas");
      // eslint-disable-next-line no-undef
      this.canvasCtx = my.createCanvasContext("canvas");

      this.showCropper({
        src: imgSrc,
        sizeType: ["original", "compressed"], //'original'(default) | 'compressed'
        maxLength: 1000, //默认2000，允许最大长宽，避免分辨率过大导致崩溃
        callback: res => {
          let cropperChangableData = this.data.cropperChangableData;
          cropperChangableData.rotateDegree = -90;
          this.setData(
            {
              cropperChangableData: cropperChangableData,
            },
            () => {
              this.hideCropper(); //隐藏，我在项目里是点击完成就上传，所以如果回调是上传，那么隐藏掉就行了，不用previewImage
            },
          );
        },
      });
      if (this.data.cropperChangableData.rotateDegree != 0) {
        setTimeout(() => {
          this.rotateImage();
        }, 100);
      }
      // this.originalChange()
    },
    // 显示cropper，如果有图片则载入
    showCropper(options) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let cropperData = _this.data.cropperData;
      let src = options.src;
      let callback = options.callback;
      let sizeType = options.sizeType;
      let maxLength = options.maxLength || 2000;

      let filterType = [];
      if (sizeType.indexOf("original") > -1) {
        filterType.push("original");
      }
      if (sizeType.indexOf("compressed") > -1) {
        filterType.push("compressed");
      }
      if (filterType.length == 1 && filterType.indexOf("original") > -1) {
        cropperData.original = true;
      }

      if (maxLength) {
        cropperData.maxLength = maxLength;
      }
      cropperData.hidden = false;
      cropperData.hash = Math.random();
      cropperData.cropCallback = callback;
      cropperData.sizeType = filterType;

      if (src) {
        // eslint-disable-next-line no-undef
        my.getImageInfo({
          src: src,
          success: function (res) {
            const w = res.width,
              h = res.height;

            const size = getAdjustMaxSize(w, h, maxLength);
            cropperData.imageInfo = {
              path: src,
              width: size.width,
              height: size.height,
            };
            _this.setData({
              cropperData,
            });
            _this.loadImage(src, w, h, false);
          },
        });
      }
    },

    // 根据图片大小设置canvas大小，并绘制图片
    loadImage(src, width, height, isRotate) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let size = getAdjustSize(W, H, width, height);

      // 适应屏幕的位置
      let left = (W - size.width) / 2;
      let top = (H - size.height) / 2;

      // set data
      let updateData = {};
      let cropperData = _this.data.cropperData;

      cropperData.drawSign = !cropperData.drawSign;
      if (!isRotate) {
        cropperData.imageInfo = {
          path: src,
          width: width,
          height: height,
        };
      }
      cropperData.left = left;
      cropperData.top = top;
      cropperData.width = size.width;
      cropperData.height = size.height;

      let compressedScale = _this.data.cropperData.original ? 1.0 : 0.4;

      cropperData.scaleInfo = {
        x: (width * compressedScale) / size.width,
        y: (height * compressedScale) / size.height,
      };

      updateData.cropperData = cropperData;
      let twidth = size.width / 2,
        theight = twidth / _this.data.scaleNum;
      if (theight > size.height) {
        theight = size.height;
      }
      twidth = _this.data.scaleNum * theight;
      let tX = (size.width - twidth) / 2,
        tY = (size.height - theight) / 2;

      // 选框四个顶点初始位置
      updateData.cropperMovableItems = {
        topleft: { x: tX, y: tY },
        topright: { x: tX + twidth, y: tY },
        bottomleft: { x: tX, y: tY + theight },
        bottomright: { x: tX + twidth, y: tY + theight },
      };

      let cropperChangableData = _this.data.cropperChangableData;
      let rotateDegree = cropperChangableData.rotateDegree;

      // 判断是否为垂直方向
      let isVertical = rotateDegree % 180 > 0;
      let rotateWidth = isVertical ? size.height : size.width;
      let rotateHeight = isVertical ? size.width : size.height;

      cropperChangableData.previewImageInfo.x = (W - rotateWidth) / 2;
      cropperChangableData.previewImageInfo.y = (H - rotateHeight) / 2;
      cropperChangableData.previewImageInfo.w = rotateWidth;
      cropperChangableData.previewImageInfo.h = rotateHeight;

      cropperChangableData.originalSize = {
        width: width,
        height: height,
      };
      cropperChangableData.scaleSize = {
        width: size.width,
        height: size.height,
      };

      updateData.cropperChangableData = cropperChangableData;

      _this.setData(updateData);
      _this.drawImage({
        path: updateData.cropperData.imageInfo.path,
        width: width,
        height: height,
      });
      _this.drawLines(updateData.cropperMovableItems, updateData.cropperData.imageInfo);
    },

    // 清空canvas上的数据
    clearCanvas(imageInfo) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let cropperData = _this.data.cropperData;
      let size = getAdjustSize(W, H, imageInfo.width, imageInfo.height);

      if (imageInfo.path != "") {
        let compressedScale = _this.data.cropperData.original ? 1.0 : 0.4;

        let { originalCanvasCtx, canvasCtx, moveCanvasCtx } = this;
        //清空原图
        originalCanvasCtx.clearRect(0, 0, imageInfo.width * compressedScale, imageInfo.height * compressedScale);
        originalCanvasCtx.draw();

        //清空选择区图片
        canvasCtx.clearRect(0, 0, size.width, size.height);
        canvasCtx.draw();

        // 清空白线框
        moveCanvasCtx.clearRect(0, 0, size.width, size.height);
        moveCanvasCtx.draw();
      }
    },

    //绘制图片
    drawImage(imageInfo) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let cropperData = _this.data.cropperData;
      let size = getAdjustSize(W, H, imageInfo.width, imageInfo.height);

      if (imageInfo.path != "") {
        let path = imageInfo.path;
        let compressedScale = _this.data.cropperData.original ? 1.0 : 0.4;
        let rotateDegree = _this.data.cropperChangableData.rotateDegree;
        // 固定为0不旋转
        rotateDegree = 0;
        let { canvasCtx, originalCanvasCtx } = this;
        //绘制原图
        drawImageWithDegree(
          originalCanvasCtx,
          path,
          imageInfo.width * compressedScale,
          imageInfo.height * compressedScale,
          rotateDegree,
        );

        //绘制选择区图片
        drawImageWithDegree(canvasCtx, path, size.width, size.height, rotateDegree);
        console.log("draw=" + path);
      }
    },

    // 单独绘制原图，当切换原图与非原图时使用
    drawOriginalImage() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let cropperData = _this.data.cropperData;
      let imageInfo = cropperData.imageInfo;
      let originalSize = _this.data.cropperChangableData.originalSize;

      if (imageInfo.path != "") {
        let path = imageInfo.path;
        let compressedScale = _this.data.cropperData.original ? 1.0 : 0.4;
        let rotateDegree = _this.data.cropperChangableData.rotateDegree;

        let { originalCanvasCtx } = this;
        //绘制原图
        drawImageWithDegree(
          originalCanvasCtx,
          path,
          originalSize.width * compressedScale,
          originalSize.height * compressedScale,
          rotateDegree,
        );
      }
    },

    //绘制选框
    drawLines(cropperMovableItems, imageInfo, callback) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      // console.log('绘制选框')
      let cropperData = _this.data.cropperData;
      let rotateDegree = _this.data.cropperChangableData.rotateDegree;
      let size = getAdjustSize(W, H, imageInfo.width, imageInfo.height);
      if (rotateDegree % 180 > 0) {
        size = getAdjustSize(W, H, imageInfo.height, imageInfo.width);
      }

      let convexDots = [];
      let orderedDots = [];

      orderedDots.push(cropperMovableItems["topleft"]);
      orderedDots.push(cropperMovableItems["topright"]);
      orderedDots.push(cropperMovableItems["bottomright"]);
      orderedDots.push(cropperMovableItems["bottomleft"]);

      // 获取凸边形的点
      convexDots = convexHull(orderedDots, orderedDots.length);

      // 四个点组成的四边形是不是凸四边形
      let canCrop = convexDots.length == 4;
      if (callback) {
        callback(canCrop);
      }

      let { moveCanvasCtx } = this;

      //绘制高亮选中区域
      let rect = getCropRect(convexDots);

      // 绘制半透明遮罩
      moveCanvasCtx.setFillStyle("rgba(0,0,0,0.5)");
      moveCanvasCtx.fillRect(0, 0, size.width, size.height);

      // 清除选中区域的半透明遮罩，使选中区域高亮
      moveCanvasCtx.setFillStyle("rgba(0,0,0,0)");
      moveCanvasCtx.clearRect(rect.x, rect.y, rect.w, rect.h);

      //绘制选中边框
      moveCanvasCtx.setStrokeStyle("white");
      moveCanvasCtx.setLineWidth(2);
      moveCanvasCtx.beginPath();
      moveCanvasCtx.moveTo(rect.x, rect.y);
      moveCanvasCtx.lineTo(rect.x + rect.w, rect.y);
      moveCanvasCtx.lineTo(rect.x + rect.w, rect.y + rect.h);
      moveCanvasCtx.lineTo(rect.x, rect.y + rect.h);
      moveCanvasCtx.lineTo(rect.x, rect.y);

      moveCanvasCtx.stroke();
      moveCanvasCtx.closePath();

      //绘制四个角
      moveCanvasCtx.setFillStyle("white");
      moveCanvasCtx.setStrokeStyle("white");
      // 绘制不同样式的角
      let len = 20,
        w = 3.0,
        offset = w / 2.0;

      moveCanvasCtx.setLineWidth(w);
      moveCanvasCtx.beginPath();

      moveCanvasCtx.moveTo(rect.x - offset, rect.y - offset + len);
      moveCanvasCtx.lineTo(rect.x - offset, rect.y - offset);
      moveCanvasCtx.lineTo(rect.x - offset + len, rect.y - offset);

      moveCanvasCtx.moveTo(rect.x + offset + rect.w - len, rect.y - offset);
      moveCanvasCtx.lineTo(rect.x + offset + rect.w, rect.y - offset);
      moveCanvasCtx.lineTo(rect.x + offset + rect.w, rect.y - offset + len);

      moveCanvasCtx.moveTo(rect.x + offset + rect.w, rect.y + offset + rect.h - len);
      moveCanvasCtx.lineTo(rect.x + offset + rect.w, rect.y + offset + rect.h);
      moveCanvasCtx.lineTo(rect.x + offset + rect.w - len, rect.y + offset + rect.h);

      moveCanvasCtx.moveTo(rect.x - offset, rect.y + offset + rect.h - len);
      moveCanvasCtx.lineTo(rect.x - offset, rect.y + offset + rect.h);
      moveCanvasCtx.lineTo(rect.x - offset + len, rect.y + offset + rect.h);

      moveCanvasCtx.stroke();
      moveCanvasCtx.closePath();

      moveCanvasCtx.draw(false, function (e) {
        // console.log('绘制选框done')
      });
    },

    dragBoxStart(e) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      touchStartX = e.touches[0].pageX; // 获取触摸时的原点
      touchStartY = e.touches[0].pageY; // 获取触摸时的原点
      touchWidth = _this.data.cropperMovableItems.topright.x - _this.data.cropperMovableItems.topleft.x;
      touchHeight = _this.data.cropperMovableItems.bottomleft.y - _this.data.cropperMovableItems.topleft.y;
      touchMoveX = 0;
      touchMoveY = 0;
    },
    dragBoxMove(e) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      touchMoveX = e.touches[0].pageX - touchStartX;
      touchMoveY = e.touches[0].pageY - touchStartY;

      let leftX = _this.data.cropperMovableItems.topleft.x + touchMoveX;
      let leftY = _this.data.cropperMovableItems.topleft.y + touchMoveY;
      // X:0->_this.data.cropperChangableData.scaleSize.width - touchWidth
      // Y:0->_this.data.cropperChangableData.scaleSize.height - touchHeight
      if (leftX < 0) {
        leftX = 0;
      }
      if (leftX > _this.data.cropperChangableData.scaleSize.width - touchWidth) {
        leftX = _this.data.cropperChangableData.scaleSize.width - touchWidth;
      }
      if (leftY < 0) {
        leftY = 0;
      }
      if (leftY > _this.data.cropperChangableData.scaleSize.height - touchHeight) {
        leftY = _this.data.cropperChangableData.scaleSize.height - touchHeight;
      }
      let cropperMovableItems = {
        topleft: {
          x: leftX,
          y: leftY,
        },
        topright: {
          x: leftX + touchWidth,
          y: leftY,
        },
        bottomleft: {
          x: leftX,
          y: leftY + touchHeight,
        },
        bottomright: {
          x: leftX + touchWidth,
          y: leftY + touchHeight,
        },
      };

      _this.drawLines(cropperMovableItems, {
        path: _this.data.cropperData.imageInfo.path,
        width: _this.data.cropperChangableData.originalSize.width,
        height: _this.data.cropperChangableData.originalSize.height,
      });
    },
    dragBoxEnd() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;

      let leftX = _this.data.cropperMovableItems.topleft.x + touchMoveX;
      let leftY = _this.data.cropperMovableItems.topleft.y + touchMoveY;
      // X:0->_this.data.cropperChangableData.scaleSize.width - touchWidth
      // Y:0->_this.data.cropperChangableData.scaleSize.height - touchHeight
      if (leftX < 0) {
        leftX = 0;
      }
      if (leftX > _this.data.cropperChangableData.scaleSize.width - touchWidth) {
        leftX = _this.data.cropperChangableData.scaleSize.width - touchWidth;
      }
      if (leftY < 0) {
        leftY = 0;
      }
      if (leftY > _this.data.cropperChangableData.scaleSize.height - touchHeight) {
        leftY = _this.data.cropperChangableData.scaleSize.height - touchHeight;
      }
      let cropperMovableItems = {
        topleft: {
          x: leftX,
          y: leftY,
        },
        topright: {
          x: leftX + touchWidth,
          y: leftY,
        },
        bottomleft: {
          x: leftX,
          y: leftY + touchHeight,
        },
        bottomright: {
          x: leftX + touchWidth,
          y: leftY + touchHeight,
        },
      };

      _this.drawLines(
        cropperMovableItems,
        {
          path: _this.data.cropperData.imageInfo.path,
          width: _this.data.cropperChangableData.originalSize.width,
          height: _this.data.cropperChangableData.originalSize.height,
        },
        () => {
          _this.setData({ cropperMovableItems });
        },
      );
    },

    // move events
    setupMoveItem(key, changedTouches, imageInfo, callback) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let cropperData = _this.data.cropperData;
      let cropperMovableItems = _this.data.cropperMovableItems;
      let left = cropperData.left;
      let top = cropperData.top;
      let size = getAdjustSize(W, H, imageInfo.width, imageInfo.height);
      if (changedTouches.length == 1) {
        let touch = changedTouches[0];
        let x = touch.clientX;
        let y = touch.clientY;
        // 宽：高 = 610:698
        // 相对画布的点
        x = x - left;
        y = y - top;
        cropperMovableItems[key].x = x;
        cropperMovableItems[key].y = y;
        // 边界检测，使截图不超出截图区域
        x = x < 0 ? 0 : x > size.width ? size.width : x;
        y = y < 0 ? 0 : y > size.height ? size.height : y;
        cropperMovableItems[key].x = x;
        cropperMovableItems[key].y = y;

        // 同时设置相连两个点的位置，是相邻的两个点跟随着移动点动，保证选框为矩形
        let w = cropperMovableItems["topright"].x - cropperMovableItems["topleft"].x;
        let topY1 = cropperMovableItems["bottomleft"].y - w / this.data.scaleNum;
        topY1 = topY1 < 0 ? 0 : topY1 > size.height ? size.height : topY1;
        let topY2 = w / this.data.scaleNum + cropperMovableItems["topleft"].y;
        topY2 = topY2 < 0 ? 0 : topY2 > size.height ? size.height : topY2;
        if (key == "topleft") {
          if (topY1 == 0) {
            x = cropperMovableItems["topright"].x - this.data.scaleNum * cropperMovableItems["bottomleft"].y;
          }
          cropperMovableItems["topleft"].x = x;
          cropperMovableItems["topleft"].y = topY1;
          cropperMovableItems["bottomleft"].x = x;
          cropperMovableItems["topright"].y = topY1;
        } else if (key == "topright") {
          if (topY1 == 0) {
            x = cropperMovableItems["topleft"].x + this.data.scaleNum * cropperMovableItems["bottomleft"].y;
          }
          cropperMovableItems["topright"].x = x;
          cropperMovableItems["topright"].y = topY1;
          cropperMovableItems["bottomright"].x = x;
          cropperMovableItems["topleft"].y = topY1;
        } else if (key == "bottomleft") {
          if (topY2 == size.height) {
            let minX =
              cropperMovableItems["topright"].x - this.data.scaleNum * (topY2 - cropperMovableItems["topright"].y);
            x = x <= minX ? minX : x;
          }
          cropperMovableItems["bottomleft"].x = x;
          cropperMovableItems["bottomleft"].y = topY2;
          cropperMovableItems["topleft"].x = x;
          cropperMovableItems["bottomright"].y = topY2;
        } else if (key == "bottomright") {
          if (topY2 == size.height) {
            let maxX =
              cropperMovableItems["topleft"].x + this.data.scaleNum * (topY2 - cropperMovableItems["topleft"].y);
            x = x >= maxX ? maxX : x;
          }
          cropperMovableItems["bottomright"].x = x;
          cropperMovableItems["bottomright"].y = topY2;
          cropperMovableItems["topright"].x = x;
          cropperMovableItems["bottomleft"].y = topY2;
        }
        _this.drawLines(cropperMovableItems, imageInfo, function (canCrop) {
          if (callback) {
            callback(cropperMovableItems, canCrop);
          }
        });
      }
    },
    // moveable-view touchmove
    moveEvent(e) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let key = e.currentTarget.dataset.key;
      let originalSize = _this.data.cropperChangableData.originalSize;

      _this.setupMoveItem(key, e.changedTouches, {
        path: _this.data.cropperData.imageInfo.path,
        width: originalSize.width,
        height: originalSize.height,
      });
    },
    // moveable-view touchend，end的时候设置movable-view的位置，如果在move阶段设置位置，选中会不流畅
    endEvent(e) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let cropperData = _this.data.cropperData;
      let cropperMovableItems = _this.data.cropperMovableItems;
      let cropperChangableData = _this.data.cropperChangableData;
      let originalSize = cropperChangableData.originalSize;
      let key = e.currentTarget.dataset.key;

      _this.setupMoveItem(
        key,
        e.changedTouches,
        {
          path: _this.data.cropperData.imageInfo.path,
          width: originalSize.width,
          height: originalSize.height,
        },
        (cropperMovableItems, canCrop) => {
          cropperChangableData.canCrop = canCrop;
          _this.setData({
            cropperChangableData: cropperChangableData,
            cropperMovableItems: cropperMovableItems,
          });
        },
      );
    },
    // 底部按钮操作事件----------------
    // 隐藏cropper
    hideCropper() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      _this.data.cropperData.hidden = true;
      _this.data.cropperData.cropCallback = null;
      _this.setData({
        cropperData: _this.data.cropperData,
        cropperMovableItems: {
          topleft: {
            x: -1,
            y: -1,
          },
          topright: {
            x: -1,
            y: -1,
          },
          bottomleft: {
            x: -1,
            y: -1,
          },
          bottomright: {
            x: -1,
            y: -1,
          },
        },
        cropperChangableData: {
          canCrop: true,
          rotateDegree: 0,
          previewImageInfo: {
            x: 0,
            y: 0,
            w: 0,
            h: 0,
          },
        },
      });
      _this.clearCanvas(_this.data.cropperData.imageInfo);
    },

    // 旋转图片
    rotateImage() {
      console.log("rotate image");
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let imageInfo = _this.data.cropperData.imageInfo;
      let width = imageInfo.width;
      let height = imageInfo.height;
      let rotateDegree = _this.data.cropperChangableData.rotateDegree;
      rotateDegree = rotateDegree == 360 ? 90 : rotateDegree + 90;
      // 判断是否为垂直方向
      let isVertical = rotateDegree % 180 > 0;
      let rotateWidth = isVertical ? height : width;
      let rotateHeight = isVertical ? width : height;
      let size = getAdjustSize(W, H, rotateWidth, rotateHeight);
      // 适应屏幕的位置
      let left = (W - size.width) / 2;
      let top = (H - size.height) / 2;
      let cropperData = _this.data.cropperData;
      cropperData.left = left;
      cropperData.top = top;
      let cropperChangableData = _this.data.cropperChangableData;
      cropperChangableData.originalSize = {
        width: rotateWidth,
        height: rotateHeight,
      };
      cropperChangableData.scaleSize = {
        width: size.width,
        height: size.height,
      };
      cropperChangableData.rotateDegree = rotateDegree;
      _this.setData({
        cropperChangableData: cropperChangableData,
        cropperData: cropperData,
      });
      let cropperMovableItemsCopy = _this.data.cropperMovableItems;
      let cropperMovableItems = {
        topleft: {
          x: 0,
          y: 0,
        },
        topright: {
          x: 0,
          y: 0,
        },
        bottomleft: {
          x: 0,
          y: 0,
        },
        bottomright: {
          x: 0,
          y: 0,
        },
      };
      _this.setData({
        cropperMovableItems: cropperMovableItems,
      });
      setTimeout(() => {
        _this.loadImage(imageInfo.path, rotateWidth, rotateHeight, true);
      }, 100);
    },

    // 原图按钮被点击
    originalChange() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let imageInfo = _this.data.cropperData.imageInfo;
      let originalSize = _this.data.cropperChangableData.originalSize;
      let width = originalSize.width;
      let height = originalSize.height;
      let original = !_this.data.cropperData.original;

      let compressedScale = original ? 1.0 : 0.4;
      let size = getAdjustSize(W, H, width, height);

      console.log("change original=" + original);

      _this.data.cropperData.original = original;
      _this.data.cropperData.scaleInfo = {
        x: (width * compressedScale) / size.width,
        y: (height * compressedScale) / size.height,
      };

      // 之所以要设置cropperMovableItems，然后延时在设置一次，是因为改变cropperData后，movable-view会莫名其妙移动到左上角
      let cropperMovableItemsCopy = _this.data.cropperMovableItems;
      let cropperMovableItems = {
        topleft: {
          x: 0,
          y: 0,
        },
        topright: {
          x: 0,
          y: 0,
        },
        bottomleft: {
          x: 0,
          y: 0,
        },
        bottomright: {
          x: 0,
          y: 0,
        },
      };
      _this.setData({
        cropperData: _this.data.cropperData,
        cropperMovableItems: cropperMovableItems,
      });
      setTimeout(() => {
        _this.setData({
          cropperMovableItems: cropperMovableItemsCopy,
        });
      }, 100);
      _this.drawOriginalImage();
    },

    // 截取选中图片，如果有回调，则调用
    cropImage() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let _this = this;
      let cropperData = _this.data.cropperData;
      let scaleInfo = cropperData.scaleInfo;
      let width = cropperData.width;
      let height = cropperData.height;
      let cropperMovableItems = _this.data.cropperMovableItems;
      let maxX = 0,
        maxY = 0;
      for (let key in cropperMovableItems) {
        let item = cropperMovableItems[key];
        maxX = item.x > maxX ? item.x : maxX;
        maxY = item.y > maxY ? item.y : maxY;
      }
      let minX = maxX,
        minY = maxY;
      for (let key in cropperMovableItems) {
        let item = cropperMovableItems[key];
        minX = item.x < minX ? item.x : minX;
        minY = item.y < minY ? item.y : minY;
      }
      let w = maxX - minX,
        h = maxY - minY;
      w *= scaleInfo.x;
      h *= scaleInfo.y;
      let x = minX * scaleInfo.x,
        y = minY * scaleInfo.y;
      let { originalCanvasCtx } = this;
      // eslint-disable-next-line no-undef
      my.showLoading({
        content: "正在截取...",
      });
      originalCanvasCtx.toTempFilePath({
        x: x,
        y: y,
        width: w,
        height: h,
        success: function (res) {
          let tempFilePath = res.apFilePath;
          // eslint-disable-next-line no-undef
          my.hideLoading();
          if (_this.data.cropperData.cropCallback) {
            if (_this.props.cutSuccess) {
              _this.props.cutSuccess(tempFilePath);
            }
            _this.data.cropperData.cropCallback(tempFilePath);
          }
        },
        fail(res) {
          // eslint-disable-next-line no-undef
          my.hideLoading();
          // eslint-disable-next-line no-undef
          my.alert({
            title: "截取失败",
            content: res.errMsg,
          });
        },
      });
    },
  },
});
